import { useMemo, type PropsWithChildren } from 'react'
import { LinearGradient } from 'expo-linear-gradient'
import { common } from '../../assets/style/common'
import { Shadow } from 'react-native-shadow-2'
import { Image, Text, StyleProp, ViewStyle, StyleSheet } from 'react-native'

type OwlButtonRef = PropsWithChildren<{
  linearGradientColors: string[]
  text: string
  textColor?: string
  imageSource?: any
  textStyle?: StyleProp<any>
  style?: StyleProp<ViewStyle>
  isShadow?: Boolean
  iconfont?: number
  onClick?: (params: any) => void
}>

const OwlButton = function (props: OwlButtonRef) {
  const appendStyle = { width: 22, height: 22, marginRight: 12 }
  const { isShadow = true, textColor = '#333333' } = props
  const contain = useMemo(
    () => (
      <LinearGradient
        onTouchEnd={props.onClick}
        colors={props.linearGradientColors}
        style={[common.flexCol, styles.button, !isShadow ? props.style : {}]}
        start={{ x: 0.8, y: 1 }}
        end={{ x: 0.1, y: 0.1 }}
      >
        <Text style={[styles.text, props.textStyle, { color: textColor }]}>
          {props.text}
        </Text>
        {props.imageSource && (
          <Image
            style={[appendStyle, { resizeMode: 'contain', marginLeft: 'auto' }]}
            source={props.imageSource}
          />
        )}
        {props.iconfont && (
          <Text
            style={[
              appendStyle,
              { fontFamily: 'iconfont', marginLeft: 'auto' },
            ]}
          >
            {props.iconfont}
          </Text>
        )}
      </LinearGradient>
    ),
    [props],
  )

  return isShadow ? (
    <Shadow
      startColor="#00000012"
      distance={6}
      offset={[0, 3]}
      style={props.style}
    >
      {contain}
    </Shadow>
  ) : (
    contain
  )
}
const styles = StyleSheet.create({
  button: {
    borderRadius: 10,
    height: 44,
    justifyContent: 'center',
    width: '100%',
    position: 'relative',
  },
  text: {
    color: '#333',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
    position: 'absolute',
    left: '0%',
    width: '100%',
  },
})
export default OwlButton
